<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件修饰符</title>
    <script src="js/vue-2.7.14.js"></script>

</head>
<body>
    <div id="app" >
        <div @mousemove="move1" id="a" style="border: red 1px solid;width: 500px;height: 500px">
            <p @mousemove.stop="move2" id="b" style="border: red 1px solid;width: 200px;height: 200px">
    <!--
    @mousemove.stop 相当于调用了 event.stopPropagation();
    @keydown.ctrl  只有按下ctrl键才有反应
    @keydown.ctrl.C  只有按下ctrl加C键才有反应
    -->
            </p>
        </div>
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{},
        methods:{
            move1(event){
                console.log("div标签"+event.offsetX+"::"+event.offsetY);
            },
            move2(event){
                console.log("p标签"+event.x+"::"+event.y);
                //停止传播/停止冒泡
                //event.stopPropagation();
            }
        }
    });
</script>
</html>